<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>待办任务列表</title>
	<style>
		.line {
			text-decoration: line-through;
			color: rgba(0, 0, 0, .3);
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<input type="text" v-model="item">
			<button @click="handleClick">Add</button>
		</div>
		<hr>
		<!-- <button @click="handleFilter('全部')" :style="{'background-color': type === '全部' ? 'red' : '#fff',}">全部</button> -->
		<!-- <button @click="handleFilter('已完成')" :style="{'background-color': type === '已完成' ? 'red' : '#fff',}">已完成</button> -->
		<!-- <button @click="handleFilter('未完成')" :style="{'background-color': type === '未完成' ? 'red' : '#fff',}">未完成</button> -->
		<button
			v-for="item of typeList" 
			@click="handleFilter(item)" 
			:style="{'background-color': type === item ? 'red' : '#fff',}"
		>{{ item }}</button>
		<hr>
		<ul v-if="filterList.length > 0">
			<li v-for="(item, index) of filterList" :key="item.id">
				<span @click="handleDelete(item.id)" :class="{ line: item.complete }">{{ item.text }}</span>
				<!-- <span :class="[item.complete ? 'line' : '']">{{ item.text }}</span> -->
			</li>
		</ul>
		<p v-else>暂无数据</p>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: function() {
				return {
					typeList: ['全部', '已完成', '未完成'],
					item: '',
					list: [
						{ id: 123, text: '吃饭', complete: false },
						{ id: 13, text: '睡觉', complete: true },
						{ id: 23, text: '打豆豆', complete: false },
						{ id: 1123, text: '写代码', complete: true },
					],
					type: '全部'
				}
			},
			computed: {
				filterList() {
					let tempList = []
					switch (this.type){
						case "已完成":
							tempList = this.list.filter(item => item.complete)
							break;
						case "未完成":
							tempList = this.list.filter(item => !item.complete)
							break;
						case "全部":
							tempList = this.list.filter(item => item.complete || !item.complete)
							break;
					}
					return tempList
				}
			},
			methods: {
				handleFilter(type) {
					this.type = type
				},
				handleDelete(id) {
					// this.list[index].complete = !this.list[index].complete
					// 拷贝数组
					let tempList = [...this.list]
					// 根据id查找对应项的索引index
					const itemIndex = tempList.findIndex(item => item.id === id)
					// 修改对应数据的complete
					tempList[itemIndex].complete = !tempList[itemIndex].complete
					/*tempList[itemIndex] = {
						...tempList[itemIndex],
						complete: !tempList[itemIndex].complete
					}*/
					// 重新赋值 this.list
					this.list = tempList
				},
				handleClick() {
					this.list.push({
						id: Date.now(),
						text: this.item,
						complete: false
					})
					this.item = ''
				},
			}
		}).$mount("#app")
	</script>
</body>
</html>